<template>
  <div class="app-container">
    <div class="title">
      <h1>{{attraction.name}}</h1>
      <el-divider></el-divider>
    </div>
    <div class="attr-container">
      <div class="attr-banner">
        <el-image :src="attraction.bannerUrl" style="height: 250px" fit="contain">
          <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline" />
          </div>
        </el-image>
      </div>
      <div class="attr-info">
        <div class="info-item">
          <span class="info-name">类型：</span>
          {{attraction.cateName}}
        </div>
        <div class="info-item">
          <span class="info-name">地区：</span>
          {{attraction.areaName}}
        </div>
        <div class="info-item">
          <span class="info-name">详细地址：</span>
          {{attraction.address}}
        </div>
        <div class="info-item">
          <span class="info-name">价格：</span>
          <span class="price">
            <b>￥</b>
            <s>{{attraction.price}}</s>
            起
          </span>
        </div>
        <div class="info-item">
          <span class="info-name">开放时间：</span>
          {{attraction.openTime}}
        </div>
        <div class="info-item">
          <div class="action">
            <span class="btn" @click="goOrder">立即预定</span>
          </div>
        </div>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="attr-desc">
      <div class="m-panel">
        <div class="m-hd">
          <h2>景区介绍</h2>
          <div class="detail-notes">
            {{attraction.attrDesc}}
          </div>
        </div>
      </div>
      <div class="m-panel">
        <div class="m-hd">
          <h2>购票须知</h2>
          <div class="detail-notes">
            {{attraction.ticketNotice}}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
import { getAttrDetail } from '@/api/travel';

export default {
  name: 'Attraction',
  created() {
    this.getAttr()
  },
  data() {
    return {
      img: require('@/assets/images/banner1.jpeg'),
      attraction: {}
    }
  },
  methods: {
    goOrder(){
      this.$router.push({
        name: 'order',
        params: {
          attraction: this.attraction
        }
      })
    },
    async getAttr() {
      let res = await getAttrDetail(this.$route.params.attrId)
      if (res.code === 200) {
        console.log(res)
        const { attraction } = res.data
        this.attraction = attraction
      } else {
        console.log('查询失败')
      }
    }
  }
}
</script>
 
<style lang="less" scoped>
.app-container {
  width: 1000px;
  margin: 0 auto;

  .title {
    margin-top: 20px;

    h1 {
      display: inline;
      margin-right: 10px;
      font-weight: normal;
      font-size: 30px;
      color: #333;
      line-height: 40px;
    }
  }

  .attr-container {
    margin: 20px 0;
    display: flex;

    .attr-info {
      margin-left: 100px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 500px;

      .info-item {
        font-size: 18px;
        .action {
          float: right;
        .btn {
          display: inline-block;
          width: 98px;
          height: 28px;
          border: 1px solid #ff9d00;
          text-align: center;
          font-size: 16px;
          border-radius: 2px;
          color: #ff9d00;
          line-height: 28px;
        }

        .btn:hover {
          background: #ff9d00;
          color: #fff;
        }
      }


        .info-name {
          font-size: 20px;

        }

        .price {
          margin-right: 5px;
          color: #ff9d00;
          font-size: 14px;

          b {
            font-size: 18px;
          }

          s {
            font-size: 28px;
            font-weight: bold;
            text-decoration: none;
          }
        }
      }
    }

  }

  .attr-desc {
    .m-panel {
      margin-bottom: 50px;
      padding-left: 25px;
      color: #333;

      .m-hd {
        margin-bottom: 25px;

        h2 {
          font-size: 24px;
          font-weight: normal;
          line-height: 30px;
        }

        .detail-notes {
          font-size: 14px;
          line-height: 1.8;
        }
      }

      .m-hd h2:before {
        content: '';
        float: left;
        margin: 3px 0 0 -25px;
        width: 5px;
        height: 24px;
        background-color: #ff9f00;
      }
    }
  }
}
</style>